<template>
  <div id="index">
    <el-container>
      <el-header>
        <nav-header></nav-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <aside-bar></aside-bar>
        </el-aside>
        <el-main id="mainbody">
          <transition enter-active-class="animated fadeInUp" >
            <router-view></router-view>
          </transition>
          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavHeader from "@/components/main/NavHeader";
import AsideBar from "@/components/main/AsideBar";
export default {
  components: {
    NavHeader,
    AsideBar
  },
  mounted() {
    this.getHeight()
    this.windowChange()
  },
  methods: {
    getHeight() {
      let height = document.documentElement.clientHeight
      let bar = document.querySelector("#mainbody")
      bar.style.height = (height - 90) + "px"
      let data = height - 130 - 100 - 160
      console.log(data);
      console.log(height );
      
      
      this.$store.commit("setHeight", data)
      
    },
    windowChange() {
      window.onresize = this.getHeight()
    },
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 0 !important;
  margin: 0;
}
</style>